<template>
  <div class="outBox">
    <div class="topBox">
      <input type="text" placeholder="课程名称" >
      <el-select v-model="value" class="m-2" placeholder="请选择课程教练" size="large">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>

      <el-button type="primary" >查询</el-button>
      <el-button>添加私教</el-button>

    </div>
    <div class="bottomBox">
      <el-table

          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border="border"


      >
        <el-table-column property="date" label="课程图片" />
        <el-table-column property="name" label="课程名称"  />
        <el-table-column property="address" label="教练" />
        <el-table-column property="name" label="排序"  />
        <el-table-column property="name" label="时长"  />
        <el-table-column property="name" label="可预约人数"  />
        <el-table-column property="name" label="操作" >
          <template #default>
            <el-button link type="primary" size="small"  >编辑</el-button>
            <el-button link type="primary" size="small">排期</el-button>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

    </div>




    <!--        评价:{{cunt}}-->

  </div>
</template>

<script lang="ts" >
import { defineComponent , ref } from "vue";
import { ElTable } from 'element-plus'
export default defineComponent({
  name: "avluation",
  setup(){

    interface User {
      date: string
      name: string
      address: string
    }


    const multipleSelection = ref<User[]>([])

    const handleSelectionChange = (val: User[]) => {
      multipleSelection.value = val
    }

    const tableData: User[] = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-08',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-06',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-07',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ]










    const cunt=2;
    const value = ref('')
    const value2 = ref('')
    const options = [
      {
        value: 'Option1',
        label: 'Option1',
      },
      {
        value: 'Option2',
        label: 'Option2',
      },
      {
        value: 'Option3',
        label: 'Option3',
      },
      {
        value: 'Option4',
        label: 'Option4',
      },
      {
        value: 'Option5',
        label: 'Option5',
      },
    ]

    return{
      cunt,
      value,
      options,
      value2,
      handleSelectionChange,
      tableData
    }
  },
})
</script>

<style scoped lang="less" >
.outBox{
  padding: 24px ;
  //上面的搜索盒子
  .topBox{
    height: 30%;
    width: 100%;

    input{
      width: 180px;
      height: 36px;

      outline: 1px solid #e3e5eb;
      border: none;
    }
    .m-2{
      margin-left:20px ;
    }
    .el-button{
      margin-left:20px ;
      width: 80px;
      height: 36px;
    }
  }
  //列表盒子
  .bottomBox{

    width: 100%;
    height: 100%;
    margin-top: 20px;
  }


}
</style>